<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>服务评价</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.evaluation-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.evaluation-card {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
			padding: 20px;
		}
		.order-info {
			display: flex;
			align-items: center;
			margin-bottom: 15px;
			padding-bottom: 15px;
			border-bottom: 1px solid #f0f0f0;
		}
		.order-img {
			width: 80px;
			height: 80px;
			border-radius: 6px;
			margin-right: 15px;
			object-fit: cover;
		}
		.order-details h4 {
			margin: 0 0 8px 0;
			color: #333;
		}
		.order-details p {
			margin: 0;
			color: #666;
			font-size: 14px;
		}
		.rating-section {
			margin: 20px 0;
		}
		.rating-item {
			display: flex;
			align-items: center;
			margin-bottom: 15px;
		}
		.rating-label {
			width: 120px;
			font-weight: 500;
			color: #333;
		}
		.comment-section {
			margin: 20px 0;
		}
		.photo-upload {
			margin: 15px 0;
		}
		.uploaded-photos {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 10px;
		}
		.uploaded-photo {
			width: 100px;
			height: 100px;
			border-radius: 6px;
			object-fit: cover;
			border: 1px solid #ddd;
		}
		.evaluation-history {
			background: #f8f9fa;
			padding: 15px;
			border-radius: 6px;
			margin-bottom: 15px;
		}
		.history-item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 10px;
		}
		.history-content {
			flex: 1;
		}
		.history-date {
			color: #999;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="evaluation-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>服务评价</h2>
				<p>对您购买的商品和服务进行评价，帮助其他用户选择</p>
			</div>

			<!-- 待评价订单 -->
			<div class="section-title">
				<h3>
					<i class="el-icon-edit"></i>
					待评价订单
				</h3>
			</div>

			<div v-for="order in pendingOrders" :key="order.id" class="evaluation-card">
				<div class="order-info">
					<img :src="order.productImage" :alt="order.productName" class="order-img">
					<div class="order-details">
						<h4>{{order.productName}}</h4>
						<p>订单号：{{order.orderNo}}</p>
						<p>购买时间：{{order.purchaseDate}}</p>
						<p>配送方式：{{order.deliveryMethod}}</p>
					</div>
				</div>

				<div class="rating-section">
					<div class="rating-item">
						<span class="rating-label">商品质量：</span>
						<el-rate 
							v-model="order.ratings.quality" 
							:colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
							show-text>
						</el-rate>
					</div>
					<div class="rating-item">
						<span class="rating-label">物流配送：</span>
						<el-rate 
							v-model="order.ratings.delivery" 
							:colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
							show-text>
						</el-rate>
					</div>
					<div class="rating-item">
						<span class="rating-label">温控效果：</span>
						<el-rate 
							v-model="order.ratings.temperature" 
							:colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
							show-text>
						</el-rate>
					</div>
					<div class="rating-item">
						<span class="rating-label">服务态度：</span>
						<el-rate 
							v-model="order.ratings.service" 
							:colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
							show-text>
						</el-rate>
					</div>
				</div>

				<div class="comment-section">
					<el-input
						type="textarea"
						:rows="4"
						placeholder="请详细描述您的购买体验，包括商品质量、配送服务、包装情况等..."
						v-model="order.comment"
						maxlength="500"
						show-word-limit>
					</el-input>
				</div>

				<div class="photo-upload">
					<el-upload
						class="upload-demo"
						:action="uploadAction"
						:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, order)"
						:file-list="order.photos"
						list-type="picture"
						multiple
						:limit="5">
						<el-button size="small" type="primary">
							<i class="el-icon-upload"></i> 上传图片
						</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB，最多5张</div>
					</el-upload>
				</div>

				<div style="text-align: right; margin-top: 20px;">
					<el-button @click="submitEvaluation(order)" type="primary">提交评价</el-button>
				</div>
			</div>

			<!-- 评价历史 -->
			<div class="section-title">
				<h3>
					<i class="el-icon-document"></i>
					评价历史
				</h3>
			</div>

			<div v-for="history in evaluationHistory" :key="history.id" class="evaluation-card">
				<div class="order-info">
					<img :src="history.productImage" :alt="history.productName" class="order-img">
					<div class="order-details">
						<h4>{{history.productName}}</h4>
						<p>订单号：{{history.orderNo}}</p>
						<p>评价时间：{{history.evaluationDate}}</p>
					</div>
				</div>

				<div class="evaluation-history">
					<div class="history-item">
						<div class="history-content">
							<div class="rating-item">
								<span class="rating-label">综合评分：</span>
								<el-rate 
									v-model="history.averageRating" 
									:colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
									disabled>
								</el-rate>
							</div>
							<p><strong>评价内容：</strong>{{history.comment}}</p>
							<div v-if="history.photos && history.photos.length > 0" class="uploaded-photos">
								<img v-for="photo in history.photos" :key="photo" :src="photo" class="uploaded-photo">
							</div>
						</div>
					</div>
					<div v-if="history.reply" class="history-item" style="background: #f0f9ff; padding: 10px; border-radius: 4px; margin-top: 10px;">
						<div class="history-content">
							<p><strong>商家回复：</strong>{{history.reply}}</p>
							<span class="history-date">{{history.replyDate}}</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 空状态 -->
			<div v-if="pendingOrders.length === 0 && evaluationHistory.length === 0" style="text-align: center; padding: 60px 20px;">
				<i class="el-icon-document" style="font-size: 64px; color: #ddd;"></i>
				<p style="color: #999; margin-top: 20px;">暂无待评价的订单</p>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					uploadAction: '/api/upload', // 上传接口地址，需要根据实际情况修改
					pendingOrders: [
						{
							id: 1,
							orderNo: 'YN202312150001',
							productName: '有机蔬菜礼盒装',
							productImage: 'https://via.placeholder.com/80x80/4CAF50/FFFFFF?text=蔬菜',
							purchaseDate: '2023-12-15 10:30:00',
							deliveryMethod: '冷链配送',
							ratings: {
								quality: 0,
								delivery: 0,
								temperature: 0,
								service: 0
							},
							comment: '',
							photos: []
						},
						{
							id: 2,
							orderNo: 'YN202312140002',
							productName: '进口冷冻牛肉',
							productImage: 'https://via.placeholder.com/80x80/FF5722/FFFFFF?text=牛肉',
							purchaseDate: '2023-12-14 14:20:00',
							deliveryMethod: '冷冻配送',
							ratings: {
								quality: 0,
								delivery: 0,
								temperature: 0,
								service: 0
							},
							comment: '',
							photos: []
						}
					],
					evaluationHistory: [
						{
							id: 3,
							orderNo: 'YN202312100003',
							productName: '新鲜海鲜套餐',
							productImage: 'https://via.placeholder.com/80x80/2196F3/FFFFFF?text=海鲜',
							evaluationDate: '2023-12-12 16:45:00',
							averageRating: 4.5,
							comment: '海鲜很新鲜，包装很好，配送及时，温控效果不错，总体满意！',
							photos: [
								'https://via.placeholder.com/100x100/E3F2FD/2196F3?text=图1',
								'https://via.placeholder.com/100x100/E8F5E8/4CAF50?text=图2'
							],
							reply: '感谢您的好评！我们会继续保持高质量的商品和服务。',
							replyDate: '2023-12-13 09:20:00'
						}
					]
				}
			},
			methods: {
				submitEvaluation(order) {
					// 验证评分
					if (order.ratings.quality === 0 || order.ratings.delivery === 0 || 
						order.ratings.temperature === 0 || order.ratings.service === 0) {
						this.$message.warning('请为所有项目打分');
						return;
					}

					// 验证评价内容
					if (!order.comment.trim()) {
						this.$message.warning('请填写评价内容');
						return;
					}

					this.$confirm('确定要提交这个评价吗？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'info'
					}).then(() => {
						// 模拟提交评价
						const averageRating = (order.ratings.quality + order.ratings.delivery + 
											order.ratings.temperature + order.ratings.service) / 4;
						
						// 添加到历史记录
						this.evaluationHistory.unshift({
							id: Date.now(),
							orderNo: order.orderNo,
							productName: order.productName,
							productImage: order.productImage,
							evaluationDate: new Date().toLocaleString(),
							averageRating: averageRating,
							comment: order.comment,
							photos: order.photos.map(photo => photo.url || photo)
						});

						// 从待评价列表移除
						const index = this.pendingOrders.findIndex(item => item.id === order.id);
						if (index > -1) {
							this.pendingOrders.splice(index, 1);
						}

						this.$message.success('评价提交成功！');
					}).catch(() => {
						// 取消提交
					});
				},

				handleUploadSuccess(response, file, fileList, order) {
					// 处理上传成功
					order.photos = fileList;
					this.$message.success('图片上传成功');
				}
			}
		});
	</script>
</body>
</html>